/**
 * @author weileiming
 * @description 输入框组件
 */

import React, { useState } from "react";
import { View, Input, Button } from "@tarojs/components";
import "./index.scss";

// 定义一个基础接口描述问文件
interface InputBoxProps {
  onSend?: (message: string) => void;
  onToggleFeature?: (visible: boolean) => void;
}

const InputBox = ({ onSend, onToggleFeature }: InputBoxProps) => {
  const [message, setMessage] = useState("");
  const [showFeature, setShowFeature] = useState(false);

  const handleSend = () => {
    if (message.trim()) {
      onSend?.(message);
      setMessage("");
    }
  };

  const toggleFeature = () => {
    const newState = !showFeature;
    setShowFeature(newState);
    onToggleFeature?.(newState);
  };

  return (
    <View className="input-box">
      <Input
        className="message-input"
        value={message}
        onInput={(e) => setMessage(e.detail.value)}
        placeholder="请输入消息..."
        placeholderClass="input-placeholder"
      />
      <Button className="send-button" onClick={handleSend}>
        发送
      </Button>
      <View
        className={`feature-button ${showFeature ? "active" : ""}`}
        onClick={toggleFeature}
      >
        <View className="plus-icon" />
      </View>
    </View>
  );
};

export default InputBox;
